<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/libs/style.css">
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<div class="col_2_3_right">
    <div class="index_viewport">
        <table id="example" cellpadding="0" cellspacing="0" border="0" width="100%">
            <thead>
            <tr>
                <th width="20%">First name</th>
                <th width="20%">Last name</th>
                <th width="35%">City</th>
                <th width="25%">Date</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
</body>
<!-- Start datatable js -->

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example').dataTable();
    });

    $.ajax({
        type:'get',//可选get
        url:'${projectPath}/search',
        data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},
        dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等
        success:function(msg){
            var msgObj=JSON.parse(msg);
            //重新构建table
            $('#example').dataTable().fnClearTable();   //将数据清除
            $('#example').dataTable().fnAddData(packagingdatatabledata(msgObj),true);  //数据必须是json对象或json对象数组

        },
        error:function(){
            alert('error');
        }
    })

    //把服务器返回的数据转成datatable须要的格式
    function packagingdatatabledata(msgObj){
        var editHtml="<a class='btn' data-toggle='modal' href='#modalbackdroptrue' >编辑</a>";
        //var editHtml="<a class='btn' href='#modalbackdroptrue' data-toggle='modal' >编辑</a>";
        var a=[];
        var tableName=['day','data','indata','edit'];
        var banddata=storjson(msgObj['data']);
        var bandindata=storjson(msgObj['indata']);
        for(var key in banddata){
            var tempObj=new Object();
            tempObj.day=key;
            tempObj.data=banddata[key];
            tempObj.indata=bandindata[key];
            tempObj.edit=editHtml;
            a.push(JSON.parse(JSON.stringify(tempObj,tableName)));
        }
        return a;
    }
</script>
</html>